<template>
  <div>
    <!-- 头像 -->
    <div class="myHead w-full h-52 flex">
      <div class="relative">
        <el-avatar :size="64" src="/src/assets/imgs/avatar.jpg"/>
      </div>
      <div class="mt-2">
        <span class="name font-medium text-base">{{ form.fullName }}</span>
      </div>
      <div class="flex mt-2">
        <div class="flex items-center justify-center">
          <svg aria-hidden="true" class="w-4 h-4 mr-1">
            <use xlink:href="#icon-dept"/>
          </svg>
          <span class="text-sm">{{ form?.dept?.deptName }}</span>
        </div>
        <div class="flex ml-4">
          <svg aria-hidden="true" class="w-5 h-5 mr-1">
            <use xlink:href="#icon-position"/>
          </svg>
          <span class="text-sm">{{ form?.roles?.roleName }}</span>
        </div>
      </div>
    </div>
    <div class="info w-full bg-white mt-4">
      <div class="flex">
        <span :class="[tabActive ? 'tabActive' : '', 'info_tab ']" @click="tabActive = true"
        >基础信息</span
        >
        <span :class="[!tabActive ? 'tabActive' : '', 'info_tab ']" @click="tabActive = false"
        >安全设置</span
        >
      </div>
      <div class="w-3/12 mt-6" v-show="tabActive">
        <el-form ref="infoRef" disabled :model="form" :rules="rules" label-width="80px">
          <el-form-item label="账号" prop="userName">
            <el-input placeholder="" v-model="form.userName"/>
          </el-form-item>
          <el-form-item label="姓名" prop="fullName">
            <el-input placeholder="" maxlength="20" v-model="form.fullName"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber">
            <el-input placeholder="" v-model="form.phonenumber"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="" v-model="form.email"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="mt-7" v-show="!tabActive">
        <span class="text-sm ml-4" style="">登录密码:</span>
        <span class="text-sm ml-7">已设置。密码可含大小写字母、数字及特殊字符@$!%*?&_，长度8-20位。</span>
        <span class="text-sm float-right" style="color: #00a991" @click="handleResetPwd">修改</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, toRefs} from 'vue'
import {useCache} from '@/hooks/web/useCache'
import {useAppStore} from '@/store/modules/app'
import {ElMessage, ElMessageBox} from 'element-plus'
import {resetUserPwd} from '@/api/user'

const {wsCache} = useCache()
const appStore = useAppStore()
const tabActive = ref(true)
const infoRef = ref()

const data = reactive({
  form: wsCache.get(appStore.getUserInfo),
  rules: { }
})
const {form, rules} = toRefs(data)

/** 重置密码按钮操作 */
const handleResetPwd = () => {
  ElMessageBox.prompt('请输入新密码', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    closeOnClickModal: false,
    inputPattern: /^[0-9A-Za-z@$!%*?&_]{8,20}$/,
    inputErrorMessage: '密码可含大小写字母、数字及特殊字符@$!%*?&_，长度8-20位。'
  })
    .then(({value}) => {
      resetUserPwd(form.value.userName, value).then(() => {
        ElMessage.success('修改成功，新密码是：' + value)
      })
    })
    .catch(() => {
    })
}
</script>

<style scoped lang="less">
.myHead {
  background-image: url('@/assets/imgs/MyInfo.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .name {
    color: #1d2129;
  }
}

.info {
  height: 555px;
  border-radius: 4px;
  padding: 20px;

  .info_tab {
    width: 88px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0px;
    color: #4e5969;
    cursor: pointer;
  }

  .tabActive {
    background: #e8fff8;
    color: #00a991;
    transition: 0.8s;
  }
}

.el-input__wrapper {
  width: 100%;
  background-color: #f2f3f5;
}
</style>
